import { defineStore } from "pinia";
import  i18n  from "@/locales";
// import { useI18n } from "vue-i18n";
// 引用切换主题的hook
import { useDark, useToggle } from "@vueuse/core";
import router from "@/router";

export type ILang = "zh-CN" | "en-US";

// 默认为浅色主题
const isDarkTheme = useDark({
  selector: "html",
  attribute: "data-theme",
  valueLight: "light",
  valueDark: "dark",
  // 自定义更新
  // onChanged: (isDark) => {
  //   console.log("isDark", isDark);
  // },
});
// isDarkTheme 函数实现原理如下
// const theme = ref(localStorage.getItem("theme") || "light");
// window.document.documentElement.setAttribute("data-theme", theme.value);

export default defineStore("appSetting", {
  state: () => ({
    // 是否显示侧边栏标题
    hideSidebarTitle: false,
    lang: localStorage.getItem("lang") || "zh-CN",
    isDarkTheme,
    // isFixedHeader: true,
  }),

  actions: {
    // 设置侧边栏标题是否显示
    setSidebarTitle() {
      this.hideSidebarTitle = !this.hideSidebarTitle;
    },
    // 设置语言
    setLang(lang: ILang) {
      this.lang = lang;
      // 存储到本地
      localStorage.setItem("lang", lang);
      // @ts-ignore 设置语言
      // console.log(i18n);
      // const i18n = useI18n();
      i18n.global.locale.value = lang;
      // console.log(i18n.global.locale);
      router.go(0);
      // location.reload();
      /**
       * 设置html标签的语言属性
       * lang.value 的值为 zh-CN 或 en-US
       * html标签的lang属性值为 zh 或 en
       */
      // 截取 - 前面的字符串
      const langStr = lang.slice(0, lang.indexOf("-"));
      // // console.log(langStr);
      // // window.document.documentElement.setAttribute("lang", lang);
      document.documentElement.setAttribute("lang", langStr);
      // router.go(0);
    },
    // 切换暗黑模式
    toggleDarkTheme() {
      this.isDarkTheme = !this.isDarkTheme;
      useToggle(this.isDarkTheme);
      let className = this.isDarkTheme ? "dark" : "";
      window.document.documentElement.setAttribute("class", className);
    },
    // 是否固定头部
    // toggleFixedHeader() {
    //   this.isFixedHeader = !this.isFixedHeader;
    // },
  },
});
